<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        //    mock   模拟接口

        // console.log(Mock)
        Mock.setup({
            // timeout 网络延迟
            // timeout: 2000
            timeout: "1000-3000"
        })

        // 模拟固定数据
        // Mock.mock(url, 数据)
        // Mock.mock('/getList', {
        //     data: 123
        // })

        // Mock.mock('/getList', {
        //     list: [
        //         {
        //             name: "123"
        //         },
        //         {
        //             name: "456"
        //         }
        //     ]
        // })


        // 模拟随机数据  (随机条数)
        // Mock.mock('/getList', {
        //     //  "list|100"   固定100条
        //     //  "list|50-200"   随机50-200之间
        //     "list|50-200": [
        //         {
        //             id: 1,
        //             name: "张三"
        //         }
        //     ]
        // })
        

        // 模拟随机数据  (随机条数 + 随机数据)
        Mock.mock('/getList', {
            //  "list|100"   固定100条
            //  "list|50-200"   随机50-200之间

            "list|50-200": [
                // "id|+1"   id自增
                // @cname    随机名称
                // "age|18-60": 随机范围之内
                // title: "@ctitle": 随机标题
                // img: "@image('50')"   图片路径
                {
                    "id|+1": 1,
                    name: "@cname",
                    "age|18-60": 18,
                    title: "@ctitle",
                    img: "@image('50')",
                    "sex|0-1": '1',
                    time: "@date(yyyy-MM-dd hh:mm:ss)",
                    city: "@city"
                }
            ]
        })



        new Vue({
            // 元素
            el: "#app",
            // 定义的数据(状态)
            data: {
                message: "数据"
            },
            created() {
                // axios 通过promise的方式对ajax进行了二次封装
                // axios.get('/getList').then(res => {
                //     console.log(res)
                // })

                axios.get('/getList').then(res => {
                    console.log(res)
                })
            }
        })
    </script>
</body>

</html>